<div class="main-container enclosing-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-server"></i>
      OPDS Settings v1 (Legacy)
    </h2>
    <p class="settings-description">
      Legacy OPDS server settings for managing your book collection access.
    </p>

    <div class="deprecation-notice">
      <i class="pi pi-exclamation-triangle"></i>
      <div>
        <p class="notice-title">Deprecated:</p>
        <p class="notice-text">
          OPDS v1 support will be removed in a future release.
          Please migrate to <strong>OPDS v2</strong> for continued support and improvements.
        </p>
      </div>
    </div>
  </div>

  <div class="settings-content">
    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-power-off"></i>
          Server Control
        </h3>
      </div>

      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">OPDS Server Enabled</label>
              <p-toggleswitch
                [(ngModel)]="opdsEnabled"
                (onChange)="toggleOpdsServer()">
              </p-toggleswitch>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              Enable or disable the OPDS server to control access to your book collection through reading apps.
            </p>
          </div>
        </div>
      </div>
    </div>

    @if (opdsEnabled) {
      <div class="preferences-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="pi pi-link"></i>
            OPDS Endpoint
          </h3>
        </div>

        <div class="settings-card">
          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-label-row">
                <label class="setting-label">Endpoint URL</label>
                <div class="input-group">
                  <input
                    id="endpoint-url"
                    class="endpoint-input"
                    type="text"
                    pInputText
                    [value]="opdsEndpoint"
                    readonly/>
                  <p-button
                    icon="pi pi-copy"
                    severity="info"
                    outlined
                    size="small"
                    (onClick)="copyOpdsEndpoint()">
                  </p-button>
                </div>
              </div>
              <p class="setting-description">
                <i class="pi pi-info-circle"></i>
                Use this URL to connect your reading apps to your OPDS catalog.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="preferences-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="pi pi-users"></i>
            OPDS Users
          </h3>
        </div>

        <div class="table-card">
          <p-table [value]="users">
            <ng-template pTemplate="header">
              <tr>
                <th>
                  <div class="header-content">
                    <i class="pi pi-user"></i>
                    <span>Username</span>
                  </div>
                </th>
                <th>
                  <div class="header-content">
                    <i class="pi pi-key"></i>
                    <span>Password</span>
                  </div>
                </th>
                <th class="actions-header">
                  <div class="header-content">
                    <i class="pi pi-cog"></i>
                    <span>Actions</span>
                  </div>
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-user>
              <tr>
                <td>
                  <div class="user-info">
                    <div class="user-avatar">
                      {{ user.username.charAt(0).toUpperCase() }}
                    </div>
                    <span class="username">{{ user.username }}</span>
                  </div>
                </td>
                <td>
                  <div class="flex items-center gap-2">
                    <p-password
                      fluid
                      class="w-32 md:w-56"
                      [(ngModel)]="dummyPassword"
                      [feedback]="false"
                      size="small"
                      [disabled]="true"
                      [toggleMask]="false">
                    </p-password>
                    <i
                      class="pi pi-info-circle text-gray-400"
                      pTooltip="The password is hidden for security reasons and is only visible once during creation. You can reset the password if needed."
                      tooltipPosition="right"
                      style="cursor: pointer;">
                    </i>
                  </div>
                </td>
                <td class="actions-cell">
                  <div class="action-buttons">
                    <p-button
                      icon="pi pi-key"
                      severity="warn"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="openResetPasswordDialog(user)"
                      pTooltip="Reset password">
                    </p-button>
                    <p-button
                      icon="pi pi-trash"
                      severity="danger"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="deleteUser(user.id)"
                      pTooltip="Delete user">
                    </p-button>
                  </div>
                </td>
              </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
              <tr>
                <td colspan="3">
                  <div class="empty-message">
                    <i class="pi pi-users"></i>
                    <p class="empty-title">No users found</p>
                    <p class="empty-subtitle">Create your first OPDS user to get started</p>
                  </div>
                </td>
              </tr>
            </ng-template>
          </p-table>
        </div>
      </div>
    }
  </div>

  <p-dialog
    header="Create User"
    [(visible)]="createUserDialogVisible"
    [modal]="true"
    styleClass="user-dialog"
    [style]="{width: '400px'}">
    <div class="dialog-form">
      <div class="form-field">
        <label for="username">Username</label>
        <input
          id="username"
          type="text"
          pInputText
          [(ngModel)]="newUser.username"
          placeholder="Enter username"/>
      </div>
      <div class="form-field">
        <div class="label-with-info">
          <label for="password">Password</label>
          <i
            class="pi pi-info-circle text-yellow-500"
            pTooltip="Password can only be seen now. It won't be retrievable later. Please save it securely."
            tooltipPosition="right"
            style="cursor: pointer;">
          </i>
        </div>
        <input
          id="password"
          type="password"
          pInputText
          [(ngModel)]="newUser.password"
          placeholder="Enter password"/>
      </div>
    </div>
    <ng-template pTemplate="footer">
      <div class="dialog-actions">
        <p-button
          label="Cancel"
          severity="secondary"
          outlined="true"
          (onClick)="cancelCreateUser()">
        </p-button>
        <p-button
          label="Create"
          severity="success"
          [disabled]="!newUser.username || !newUser.password"
          (onClick)="saveNewUser()">
        </p-button>
      </div>
    </ng-template>
  </p-dialog>

  <p-dialog
    header="Reset User Password"
    [(visible)]="resetPasswordDialogVisible"
    [modal]="true"
    styleClass="user-dialog"
    [style]="{width: '400px'}">
    <div class="dialog-form">
      <p class="reset-info">Reset password for: <strong>{{ selectedUser?.username }}</strong></p>
      <div class="form-field">
        <div class="label-with-info">
          <label for="newPassword">New Password</label>
          <i
            class="pi pi-info-circle text-yellow-500"
            pTooltip="Password can only be seen now. It won't be retrievable later. Please save it securely."
            tooltipPosition="right"
            style="cursor: pointer;">
          </i>
        </div>
        <input
          id="newPassword"
          type="password"
          pInputText
          [(ngModel)]="newPassword"
          placeholder="Enter new password"/>
      </div>
    </div>
    <ng-template pTemplate="footer">
      <div class="dialog-actions">
        <p-button
          label="Cancel"
          severity="secondary"
          outlined="true"
          (onClick)="cancelResetPassword()">
        </p-button>
        <p-button
          label="Reset"
          severity="success"
          [disabled]="!newPassword"
          (onClick)="confirmResetPassword()">
        </p-button>
      </div>
    </ng-template>
  </p-dialog>
</div>
